
<template>
   
  <div class="shop" v-loading='loading'>
    <div style="display:flex;justify-content: end;">
      <!-- <FormSearch
        class="header"
        ref="formSearch"
        :forms="searchForm"
        @handleSearch="handleSearch"
        @handleReset="handleReset"
      /> -->
      <el-form
      ref="from"
      :model="query"
      :inline="true"
    >
      <el-form-item label="" >
        <el-select
         
          v-model="query.status"
          size="mini"
          clearable
          placeholder="选择用户状态"
        >
          <el-option  label="正常" :value="0" />
          <el-option  label="已禁用" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="" ><el-input  v-model="query.account" size="mini" clearable placeholder="请输入用户账号" /></el-form-item>
      <el-form-item label="" ><el-input  v-model="query.inviter" size="mini" clearable placeholder="请输入邀请者" /></el-form-item>
      <el-form-item label="" ><el-input  v-model="query.subMobile" size="mini" clearable placeholder="请输入子账号手机号" /></el-form-item>
        <!-- 
        <el-date-picker
          v-else-if="item.type === 'datePicker'"
          v-model="formValue[item.key]"
          size="mini"
          clearable
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :type="item.rangeType"
          :format="item.format || 'yyyy-MM-dd'"
          :value-format="item.valueFormat || 'yyyy-MM-dd'"
        />
        <el-select
          v-else-if="item.type === 'select' && !item.asyncFunc"
          v-model="formValue[item.key]"
          size="mini"
          clearable
          :placeholder="item.placeholder"
        >
          <el-option
            v-for="(option, index) in item.options"
            :key="index"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
        <AsyncSelect
          v-else-if="item.type === 'select' && item.asyncFunc"
          :form="item"
          v-model="formValue[item.key]"
        /> -->
      
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleSearch">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    </div>
      <el-table
        class="table-box"
        :data="tableData"
        style="width:100%"
        :cell-style="tc"
        :max-height="screenHight"
        :header-cell-style="tccolor"
      > 
        <el-table-column prop="id" label="用户ID" />
        <el-table-column prop="nickName" label="用户名/昵称" />
        <el-table-column prop="mobile" label="用户账号"/>
        <el-table-column prop="inviterMobile" label="邀请者">
          <template slot-scope="scope">  
            {{ scope.row.inviterMobile }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="role_name" label="代理身份"/> -->
        <el-table-column prop="statusText" label="账号状态"/>
        <!-- <el-table-column prop="create_time" label="注册时间"/> -->
        <el-table-column prop="lastLoginAt" label="最新登录时间"/>
        <el-table-column  label="操作" fixed="right" width="340">
          <template slot-scope="scope">  
            <el-button size="mini"  @click="openHbDialog(scope.row)">红包余额</el-button>
            <el-button size="mini"  @click="goTaokeOrder(scope.row.mobile)">淘客订单</el-button>
            <el-button size="mini"  @click="goHbList(scope.row.mobile)">红包兑换订单</el-button>
          </template>
        </el-table-column>
      </el-table>
    <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="query.pageNum"
          :page-size="query.pageSize"
          :page-sizes="[20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>

    <!-- 红包弹窗 -->
    <HbDialog ref="hbDialog" :tableData="hbTableData" :total="hbTotal" :balance="balance" @hbPageChange="hbPageChange" />
  </div>
</template>

<script>
import HbDialog from './components/hbDialog'
import FormSearch from '@/components/FormSearch'
import { getFans } from "@/api/shopList";
import {getConsume,getTotalMoneyByUid} from '@/api/store'
export default {
  components: {
    HbDialog,
    // FormSearch
  },
  data() {
    
    const searchForm = localStorage.getItem('is_partner') === 'false' ? {
        form: [
          {
            type: 'select',
            key: 'status',
            placeholder: '请选择账号状态',
            options: [
              {
                label: '正常',
                value: '1'
              },
              {
                label: '已禁用',
                value: '0'
              }
            ]
          },
          {
            type: 'input',
            key: 'mobile',
            placeholder: '请输入用户账号',
          },
          {
            type: 'input',
            key: 'invitation_mobile',
            placeholder: '请输入邀请者'
          }
        ]
      } : {
        form: [
          {
            type: 'select',
            key: 'status',
            placeholder: '请选择账号状态',
            options: [
              {
                label: '正常',
                value: '1'
              },
              {
                label: '已禁用',
                value: '0'
              }
            ]
          },
          {
            type: 'input',
            key: 'mobile',
            placeholder: '请输入用户账号',
          },
          {
            type: 'input',
            key: 'invitation_mobile',
            placeholder: '请输入邀请者'
          },
          {
            type: 'input',
            key: 'staff_mobile',
            placeholder: '请输入子账号手机号'
          }
        ]
      } 
    return {
      tableData: [],
      loading:true,
      total: 0,
      page: 1,
      size: 20,
      form: {},
      hbTotal: 0,
      uid: '', // 选中的员工
      balance: '',
      searchForm: searchForm,
      hbVisible: false,
      hbTableData: [],
      earch_uid: '',
      hbquery:{
        pageNum: 1,
        pageSize: 20,
        uid: 0
      },
      query:{
        pageNum: 1,
        pageSize: 20,
        status:0,
        account:'',
        inviter:'',
        subMobile:'',
        sellerId:0,
        partnerId:sessionStorage.getItem('partnerId') || 0,
        memberId:this.$route.query.memberId || undefined

      }
    };
  },
  mounted(){
    this.query.inviter = this.$route.query.inviter || ''
    let params = {
      page: 1,
      size: this.size
    }
    params.search_uid = this.search_uid
    console.log(this.search_uid)
    this.getFansList(params);
  },

  methods: {
    // 搜索
    handleSearch(formValue) {
      // this.form = formValue
      // const params = {
      //   ...formValue,
      //   page: 1,
      //   size: this.size
      // }
      // console.log(formValue)
      this.getFansList()
    },
    handleReset() {
      this.form = {}
      this.page = 1
      const params = {
        page: 1,
        size: this.size
      }
      this.getFansList(params)
    },
    pageChange(page) {
      this.page = page
      const params = {
        ...this.form,
        page,
        size: this.size
      }
      this.getFansList(params);
    },
    // 获取红包信息
    getHbInfo(params) {
      getConsume(this.hbquery).then(res => {
        if(res.code === 200) {
          console.log(res)
          // this.hbTableData = res.data.data.map(item => {
          //     item.money_tlj = item.type === 0 ? '+' + item.money_tlj : '-' + item.money_tlj
          //     return item
          // })
          this.hbTableData = res.data.list
          this.hbTotal = res.data.total
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getHbBanlance() {

    },
    hbPageChange(page) {
      console.log(page)
      // const params = {
      //   page: page,
      //   size: 20,
      //   uid: this.uid
      // }
      this.hbquery.pageNum = page
      this.getHbInfo()
    },
    getTotalMoneyByUid(){
      let data={
        uid:this.uid
      }
      getTotalMoneyByUid(data).then(res => {
        this.balance = res.data
        // console.log(this.hbTotal,res.data)
      })
    },
    // 打开红包余额弹窗
    openHbDialog(row) {
      this.uid = row.id
      this.hbquery.uid = row.id
      this.balance = row.balance_red_packet
      this.hbquery.pageNum = 1
      // const params = {
      //   uid: row.id,
      //   page: 1
      // }
      this.getHbInfo()
      this.getTotalMoneyByUid()
      this.$refs.hbDialog.show()
    },
    //获取粉丝列表
    async getFansList(params) {
      // params.search_uid = this.search_uid
      this.loading = true
      getFans(this.query).then(res => {
        console.log(res, 'res')
        this.loading = false
        this.total = res.data.total
        this.tableData = res.data.list
      })
    },
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    goHbList(mobile) {
      this.$router.push({
        name: 'home_hbExchangeProfit',
        query: { mobile:mobile }
      })
    },
    goTaokeOrder(mobile) {
      this.$router.push({
        name: 'home_taokeCPSOrderProfit',
        query: { mobile:mobile }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
    background-color: #fff;
    height: 100%;
    padding: 0 20px ;
    box-sizing: border-box;
    position: relative;
  .header {
    float: right;
  }
  .table-box {
      height: calc(100vh - 220px);
  }
  .pagination {
    position: absolute;
    bottom: 15px;
    right: 20px;
    z-index: 99;
  }
}
</style>